import React, { useEffect, useState } from 'react';

import { useParams } from 'react-router-dom';

import { ArrowLeftOutlined } from '@ant-design/icons';

import { type DeviceGroup, deviceGroupDetailApi } from '@/api/deviceGroupApi';
import ExpandableDescriptions from '@/components/ExpandableCard/ExpandableDescriptions';
import { useRouter } from '@/hooks/useRouter';
import { renderValue } from '@/utils/renderUtils';

import DeviceGroupDetail from './modules/detail';

/**
 * 设备分组详情页
 */
const DeviceGroupDetailPage: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const { navigate } = useRouter();
  const [loading, setLoading] = useState(true);
  const [groupDetail, setGroupDetail] = useState<DeviceGroup | null>(null);

  // 获取分组详情
  const fetchGroupDetail = async () => {
    if (!id) return;

    try {
      setLoading(true);
      const res = await deviceGroupDetailApi({ id: Number(id) });
      if (res.success) {
        setGroupDetail(res.data);
      }
    } catch (error) {
      console.error('获取分组详情失败:', error);
      window.$message.error('获取分组详情失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchGroupDetail();
  }, [id]);

  if (loading) {
    return (
      <div className="flex justify-center items-center h-96">
        <ASpin size="large" />
      </div>
    );
  }

  if (!groupDetail) {
    return (
      <div className="text-center py-8">
        <p>分组详情不存在</p>
        <AButton onClick={() => navigate('/device/group')}>返回分组列表</AButton>
      </div>
    );
  }

  return (
    <div className="page-wrapper">
      <div className="page-title">
        <ArrowLeftOutlined className="mx-4" onClick={() => navigate('/device/group')} />
        <div className="page-main-title">分组详情</div>
        <div className="page-sub-title">
          分组管理提供了对设备场景化的管理方式，通过分组可以实现设备批量监测和联动
        </div>
      </div>

      <div className="page-content-box">
        <div className="page-content">
          <ExpandableDescriptions
            title="基本信息"
            className="mb-6"
            defaultExpanded={false}
            basicItems={[
              <ADescriptions.Item key="groupName" label="分组名称">
                {renderValue(groupDetail.groupName)}
              </ADescriptions.Item>,
              <ADescriptions.Item key="id" label="分组ID">
                {renderValue(groupDetail.id)}
              </ADescriptions.Item>,
              <ADescriptions.Item key="deviceCount" label="设备数量">
                <span style={{ color: '#1890ff', fontWeight: 'bold' }}>
                  {groupDetail.deviceCount || 0} 台设备
                </span>
              </ADescriptions.Item>,
              <ADescriptions.Item key="createTime" label="创建时间">
                {renderValue(groupDetail.createTime)}
              </ADescriptions.Item>,
            ]}
            expandedItems={[
              <ADescriptions.Item key="updateTime" label="更新时间">
                {renderValue(groupDetail.updateTime)}
              </ADescriptions.Item>,
              <ADescriptions.Item key="remark" label="分组描述" span={2}>
                {renderValue(groupDetail.remark)}
              </ADescriptions.Item>,
            ]}
          />

          {/* 设备列表组件 */}
          <DeviceGroupDetail />
        </div>
      </div>
    </div>
  );
};

export default DeviceGroupDetailPage;
